<!-- modules/layout-mode.vue -->
<template>
    <div class="drawer-item">
      <!-- 🎯 模块标题 -->
      <div class="drawer-item-header">
        <el-icon><Grid /></el-icon>
        <span>布局模式</span>
      </div>
      
      <!-- 🎯 布局预览卡片 -->
      <LayoutModeCard 
        v-model="currentLayoutMode" 
        :disabled="isMobile"
        class="layout-cards"
      >
        <!-- 🎯 垂直布局预览 -->
        <template #vertical>
          <div class="preview-layout vertical-layout">
            <div class="preview-sider primary"></div>
            <div class="preview-main-wrapper">
              <div class="preview-header"></div>
              <div class="preview-content"></div>
            </div>
          </div>
        </template>
        
        <!-- 🎯 水平布局预览 -->
        <template #horizontal>
          <div class="preview-layout horizontal-layout">
            <div class="preview-header primary"></div>
            <div class="preview-content"></div>
          </div>
        </template>
        
        <!-- 🎯 垂直混合布局预览 -->
        <template #vertical-mix>
          <div class="preview-layout vertical-mix-layout">
            <div class="preview-sider thin primary"></div>
            <div class="preview-sider normal secondary"></div>
            <div class="preview-main-wrapper">
              <div class="preview-header"></div>
              <div class="preview-content"></div>
            </div>
          </div>
        </template>
        
        <!-- 🎯 水平混合布局预览 -->
        <template #horizontal-mix>
          <div class="preview-layout horizontal-mix-layout">
            <div class="preview-header primary"></div>
            <div class="preview-bottom">
              <div class="preview-sider normal secondary"></div>
              <div class="preview-content"></div>
            </div>
          </div>
        </template>
      </LayoutModeCard>
      
      <!-- 🎯 水平混合布局的特殊选项 -->
      <div v-if="currentLayoutMode === 'horizontal-mix'" class="layout-options">
        <SettingItem 
          label="反向水平混合" 
          tooltip="将子菜单显示在右侧"
        >
          <el-switch
            v-model="reverseHorizontalMix"
            @change="handleReverseHorizontalMixChange"
          />
        </SettingItem>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { Grid, Check } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import { useLayoutManage } from '@/layouts/layoutManage.js'
  import { useDevice } from '@/composables/useDevice.js'
  import LayoutModeCard from '../components/layout-mode-card.vue'
  import SettingItem from '../components/setting-item.vue'
  
  // 🎯 布局管理
  const {
    layoutSetting,
    setLayoutMode,
    LAYOUT_MODES
  } = useLayoutManage()
  
  const { isMobile } = useDevice()
  
  // 🎯 当前布局模式
  const currentLayoutMode = computed({
    get: () => layoutSetting.mode,
    set: (value) => {
      setLayoutMode(value)
    }
  })
  
  // 🎯 水平混合布局反转选项
  const reverseHorizontalMix = computed({
    get: () => layoutSetting.reverseHorizontalMix,
    set: (value) => {
      layoutSetting.reverseHorizontalMix = value
    }
  })
  
  // 🎯 事件处理
  function handleReverseHorizontalMixChange(value) {
    ElMessage.success(value ? '已启用反向水平混合' : '已关闭反向水平混合')
    console.log('🔄 水平混合布局反转:', value)
  }
  </script>
  
  <style lang="scss" scoped>
  .drawer-item {
    // 🎯 布局卡片容器
    .layout-cards {
      margin-bottom: 16px;
    }
    
    // 🎯 布局选项
    .layout-options {
      padding: 16px;
      background: var(--el-bg-color-page);
      border-radius: 8px;
      border: 1px solid var(--el-border-color-lighter);
    }
  }
  
  // 🎯 布局预览样式
  .preview-layout {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 4px;
    gap: 4px;
    
    // 🎯 垂直布局预览
    &.vertical-layout {
      flex-direction: row;
    }
    
    // 🎯 水平布局预览
    &.horizontal-layout {
      flex-direction: column;
    }
    
    // 🎯 垂直混合布局预览
    &.vertical-mix-layout {
      flex-direction: row;
    }
    
    // 🎯 水平混合布局预览
    &.horizontal-mix-layout {
      flex-direction: column;
      
      .preview-bottom {
        flex: 1;
        display: flex;
        gap: 4px;
      }
    }
  }
  
  // 🎯 预览元素样式
  .preview-sider {
    border-radius: 3px;
    
    &.primary {
      background: var(--el-color-primary);
    }
    
    &.secondary {
      background: var(--el-color-primary-light-5);
    }
    
    &.thin {
      width: 16px;
    }
    
    &.normal {
      width: 28px;
    }
  }
  
  .preview-header {
    height: 16px;
    border-radius: 3px;
    
    &.primary {
      background: var(--el-color-primary-light-3);
    }
  }
  
  .preview-main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .preview-content {
    flex: 1;
    background: var(--el-bg-color);
    border-radius: 3px;
    border: 1px solid var(--el-border-color-extra-light);
  }
  
  .preview-bottom {
    flex: 1;
    display: flex;
    gap: 4px;
  }
  </style>